<template>
  <div class="developer-Kits">
    <div v-for="(item, i) in data" :key="i" style="margin:30px 0 0 100px;">
      <div class="title">
        <div class="tool">{{ item.tool }}</div>
        <el-button type="text" @click="toTest(i, item.url)">介绍(点击翻转)</el-button>
      </div>
      <div class=" box" :class="item.todo === false ? '' : 'flipped'">
        <div class="card front">
          <img :src=item.url />
          <p><el-link type="primary" @click="download(i)">下载</el-link></p>
        </div>
        <div class="card back">{{ item.explain }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeveloperKits',
  data() {
    return {
      data: [
        {
          todo: false,
          tool: 'IDEA',
          url: 'https://p1.music.126.net/OoXJt2TsMUOReFs8ciCFjg==/109951168361686528.jpg?param=180y180',
          download: 'https://www.jetbrains.com/zh-cn/idea/download/#section=windows',
          explain: 'IntelliJ IDEA 是一个智能的上下文感知 IDE，可以使用 Java 和其他 JVM 语言（例如 Kotlin、Scala 和 Groovy）开发各种应用程序。 得益于强大的集成工具。',
        },
        {
          todo: false,
          tool: 'VsCode',
          url: 'https://p1.music.126.net/MA5zS6mkpb_gsEaUS0NmcQ==/109951168361951975.jpg?param=180y180',
          download: 'https://code.visualstudio.com/docs/?dv=win',
          explain: '一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。',
        },
        {
          todo: false,
          tool: 'NodeJS',
          url: 'https://p1.music.126.net/xsyXx0-WIeXmbSDblLaRZg==/109951168361799620.jpg?param=180y180',
          download: 'https://nodejs.org/en/',
          explain: '一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1]  让JavaScript 运行在服务端的开发平台。',
        },
        {
          todo: false,
          tool: 'MySQL',
          url: 'https://p1.music.126.net/Foh8ctsFb6G-WkMuo3J_pA==/109951168361718701.jpg?param=180y180',
          download: 'https://www.mysql.com/products/workbench/',
          explain: 'MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。',
        },
        {
          todo: false,
          tool: 'Vue',
          url: '	https://p1.music.126.net/VxbcdpRq_kH5gHdOJ_z7RQ==/109951168361876097.jpg?param=180y180',
          download: 'https://cn.vuejs.org/guide/introduction.html',
          explain: 'Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。',
        },
      ]
    }
  },
  mounted() { },
  created() { },
  methods: {
    toTest(i, url) {
      this.data[i].todo = !this.data[i].todo;
    },
    download(i) {
      window.open(this.data[i].download)
    }
  },
}
</script>

<style lang='scss' scoped>
.developer-Kits {
  display: flex;
  flex-wrap: wrap;

  .title {
    display: flex;
    justify-content: space-between;
    height: 30px;
    padding: 10px 15px 0 15px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    border-radius: 20px 20px 0 0;
    font-weight: 400;
    font-size: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .tool {
      font-weight: 600;
      font-size: 20px;
    }
  }

  .box {
    width: 260px;
    height: 300px;
    transform-style: preserve-3d;
    transition: transform 1s;
  }

  .card {
    position: absolute;
    width: calc(100% - 2px);
    height: 100%;
    backface-visibility: hidden; //后面的藏起来, 不然会有小叠加..
    border-radius: 0 0 20px 20px;
  }

  .front {
    box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #EBEEF5;
    border-top: none;
    background-color: #FFF;

    img {
      width: 200px;
      height: 200px;
      margin: 20px 0 0 30px;
    }

    p {
      display: flex;
      justify-content: center;
    }
  }

  .back {
    padding: 10px;
    box-sizing: border-box;
    transform: rotateY(180deg);
    box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #EBEEF5;
    border-top: none;
    background-color: #FFF;
    text-indent: 2em;

  }

  .flipped {
    transform: rotateY(180deg);
  }
}
</style>